<template>
  <section>
    <el-card shadow="never" class="cardBox" >
      <el-row type="flex" justify="space-between" :gutter="20">
        <el-col :span="8" v-for="(item, idx) of list" :key="idx">
          <el-card shadow="never" class="cardStyle">
            <el-row type="flex" justify="center">
              <span class="fontStyle">{{ item.name }}</span>
            </el-row>
            <el-row type="flex" justify="center">
              <span class="numberStyle">{{ item.con }}</span>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";

@Component
export default class MyApplication extends Vue {
  protected list: any = [
    { name: "账户总量", con: "32个" },
    { name: "购电方", con: "2000个" },
    { name: "产销方", con: "2000个" },
  ];
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.bgColor {
  background-color: rgba(7, 123, 232, 0.05);
}
.cardStyle {
  
  background: rgba(7, 123, 232, 0.05);
  .fontStyle {
    color: #077be8;
    font-size: 16px;
    line-height: 36px;
  }
  .numberStyle {
    font-size: 24px;
    margin-top: 10px;
  }
}
</style>


